    <style scoped>
  .single{
      padding: 0 20px;
  }
  .single .bor{
      border-bottom: 1px solid #bebebe;
  }
  .single .bot{
      margin-top: 20px;
  }
  .single .bot:hover{
      cursor:pointer;
  }
  .single .flex{
      box-sizing: border-box;
      display: flex;
      width:100%;
      /* border: 1px solid #000; */
      /* height: 160px; */
      padding-bottom: 25px;
      border-bottom: 1px dashed  #bebebe;
      margin-bottom: 1px;
  }
  .single .flex .images{
      /* flex-grow: 1;  */
      width:160px;   
      /* border: 1px solid blue; */
      display: flex;
      align-items: center;
      justify-content: center;
      padding:20px;
  }
  .single .flex .images img{
      display: inline-block;
      width:90px;
      height:90px;
      border: 1px solid #E7E7E7;
      border-radius: 50%;
  }
  .single .flex .detail{
      padding: 0 15px;
      width:calc(100% - 160px); 
      /* border: 1px solid gold; */
  }
  .single .detail .ttop{
      font-size: 16px;
      font-weight: 700;
      height: 36px;
      line-height: 36px;
  }
  .single .detail .bbop{
      box-sizing: border-box;
      /* padding: 0 15px; */
  }
  .single .detail .bbop .shows{
      display: inline-block;
      margin-right: 20px;
      /* margin-right: 12px;
      padding-left:  12px; */
      padding: 0 20px;
      border: 1px solid #dddddd;
      border-radius:20px;
      height: 40px;
      line-height: 40px;
      margin-top: 25px;
      background-color: #fff;
      position: relative;
  }
  .single .newspan{
        display: inline-block;
        margin-right: 12px;
        padding: 0 20px;
        border: 1px solid #dddddd;
        border-radius: 30px;
        height: 40px;
        line-height: 40px;
        margin-top: 14px;
  }
  .single .shows .showout{
      display: none;
      position: absolute;
      /* margin-left:10px; */
      top:40px;
      right:0;
  }
  .single .shows .showout::after{
      content: "";
      display: block;
      clear: both;
  }
  .single .flex .shows .showout li{
      margin: 0;
      padding: 0;
      display: inline-block;
  }
  .single .shows .showout li{
      /* margin-top: 5px; */
      float: right;
      border: 1px solid #dddddd;
      text-align: center;
      height: 20px;
      font-size: 10px;
      line-height: 20px;
      width:40px;
      border-radius: 20px;
      color: #fff;
  }
  .single .shows:hover .showout{
      display: inline-block;
  }
  .single .shows .showout .lia{
      background-color: #2e7ee1;
  }
  .single .shows .showout .lib{
      background-color:  #ff6769;
  }
  
</style>
<style>
    .single .ivu-btn.ivu-btn-large{
        border-radius:2px;
    }
    .single .fr i{
     vertical-align: middle;
     font-size:16px;
    }
</style>
<template>
    <div class="bill_single">
        <product-title></product-title>
        <div  class="single">
            <div class="common-box-body">
                <Form>
                    <Row :xs="24" :sm="24" :md="24" :lg="24" class="bor">
                        <Col :xs="6" :sm="6" :md="6" :lg="6">
                            <FormItem>
                                <Select placeholder="选择出单平台" v-model='formdata.online_id' >  
                                    <Option v-for="item in countrys" :value="item.id" :key="item.id">
                                        {{item.name}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="2" :sm="2" :md="2" :lg="2">
                            <Button size="large" class="fr" type="info" icon="ios-search"  @click="search">搜索</Button>
                        </Col>
                        <Col :xs="2" :sm="2" :md="2" :lg="2" offset='14' class="btn">
                            <Button size="large" class="fr" type="success" icon="icon iconfont icon-fenlei" @click="modalTrue1()">新增</Button>
                        </Col>
                        
                    </Row>
                </Form>
                <Row :xs="24" :sm="24" :md="24" :lg="24" v-for="(item,index) in lists" :key="item.id" class="bot">
                    <!-- v-for="(item,index) in formdata" -->
                    <template>
                        <Col span="24" class="flex">
                                <div class="images">
                                    <img :src="item.logo" alt="未知图片">
                                </div>   
                                <div class="detail">
                                    <div class="ttop" >{{item.name}}</div>
                                    <div class="bbop">
                                        <template v-for="(items,itemindex) in item.accounts">
                                            <div class="shows" v-show="items" >
                                                <span v-if="items.channel_name">{{items.channel_name}}</span><span v-if="items.job_code">--{{items.job_code}}</span><span v-if="items.account">--{{items.account}}</span>
                                                <ul class="showout">
                                                    <li class="lia" @click="edit(itemindex,index)">编辑</li>
                                                    <li class="lib"  @click="remove(itemindex,index)">删除</li>
                                                </ul>
                                            </div>
                                        </template>
                                        <span style="background-color:#2DB7F5;color:white;border:none;" class="newspan"  @click="modalTrue2(index)">
                                            新增账号
                                        </span>
                                    </div>
                                </div>
                        </Col>
                    </template>
            </Row>
        </div>
        </div>
        <!-- @on-ok="add" @on-cancel="cancel" -->
        <Modal v-model="showAddModal" ok-text="提交" @on-ok="add" @on-cancel="cancel" :mask-closable='closeable' width="600" title="新增出单平台"  :loading="loading" class-name="common-box-body showAddModal" :styles="{top: '150px'}">
            <Row>
                <Col>
                    <Form :model="org" ref="org" :rules="ruleValidate"  >
                        <Col :md='24' :lg="24">
                            <Col :md='18' :lg="18">
                                <Form-item label="出单平台" prop="online_id" required>
                                    <Select @on-change="setOption($event)" v-model="org.online_id" :disabled='disable' placeholder='请选择出单平台'>
                                        <Option  v-for="(item,index) in roleList" :value="item.id" :key="item.id">{{item.name}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :md='6' :lg="6">
                                <Form-item >
                                    <a style="color:#2DB7F5;" target="_blank" :href='href'><div>跳转至出单平台...</div></a>
                                </Form-item>
                            </Col>
                        </Col>
                        <Form-item label="名称" prop="channel_name" required >
                            <Input v-model="org.channel_name" placeholder="请输入名称"></Input>
                        </Form-item>
                        <Form-item label="工号" prop="job_code" required>
                            <Input v-model="org.job_code" placeholder="请输入工号"></Input>
                        </Form-item>
                        <Form-item label="账号" prop="account" required>
                            <Input v-model="org.account" placeholder="请输入账号"></Input>
                        </Form-item>
                        <Form-item label="密码" prop="online_pwd" v-if="eyes" required>
                            <Input v-model="org.online_pwd" type="password" icon='icon iconfont icon-chakan' @on-click="kan()" placeholder="请输入密码" >
                            </Input>
                        </Form-item>
                        <Form-item label="密码" prop="online_pwd" v-if="eyes2" required>
                            <Input v-model="org.online_pwd" type="text" icon='icon iconfont icon-close-eye' @on-click="kan2()" placeholder="请输入密码" >     
                            </Input>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import {get_online_list,create_yun_online,update_yun_online,get_yun_online_list,get_yun_online,delete_yun_online,get_online_by_yun} from '../../api/org'
    export default {
        data() {
            return {
                href:"javascript:;",
                countrys:[],//公司类型
                roleList:[],
                closeable: false,//shif按ese按钮退出
                loading: true,
                showAddModal:false,//点击设置,弹出模态框
                eyes:true,
                eyes2:false,
                disable:false,
                online_url:"",//href路径
                formdata:{
                    online_id:""
                },
                lists:[],
                org:{
                    name:"",
                    online_id:"",//出单平台id
                    channel_name:"",//名称
                    job_code:'',//工号
                    account:"",//账号
                    online_pwd:"",//密码
                },
                ruleValidate: {
                    online_id:[
                        { required: true, message: '不能为空' }
                    ],
                    
                    job_code: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ],
                    account: [{ required: true, message: '不能为空',  }],
                    online_pwd: [{ required: true, message: '不能为空',  }],
                    channel_name: [{ required: true, message: '不能为空',  }]
                },
            }
        },
        created(){
            this.getCountryCate();
            this.getlist();
            this.getcate();
        },
        components: {
            productTitle
        },
        methods:{
            // 角色idname传值
            setOption(val){
                this.roleList.map(item=>{
                    if(item.id==val){
                        this.org.name = item.name;
                        this.href = item.online_url;
                    }
                })
            },
            // 
            getcate(){
                new Promise((resolve, reject) => {
                    get_online_by_yun().then(res => { 
                        if (res.data.err == 0) {
                            this.countrys = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 点击搜索,进行数据搜索
            search(){
                this.getlist()
            },
            //获取新增出单平台信息getCountryCate
            getCountryCate(){  
                new Promise((resolve, reject) => {
                    get_online_list().then(res => {
                        if (res.data.err == 0) {
                            this.roleList = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 获取列表服务
            getlist(){
                new Promise((resolve, reject) => {
                    get_yun_online_list(this.formdata).then(res => {
                        if (res.data.err == 0) {
                            this.lists = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 对密码的看见设置
            kan(){
                this.eyes=false;
                this.eyes2=true;
            },
            kan2(){
                this.eyes=true;
                this.eyes2=false;
            },
             
            teyueAdd(){

            },
            // 点击设置显示模态框
            modalTrue1(){
                 this.showAddModal = true; 
                 this.disable = false;
                 this.org.id = "";
            },
            modalTrue2(index){
                 this.showAddModal = true;  
                 this.disable = true;
                 this.org.online_id = this.lists[index].online_id;
                 this.org.id = "";
            },
            // 删除
            remove(itemindex,index){
                var _this = this;
                _this.org.id=_this.lists[index].accounts[itemindex].id;
                var _param = {
                    id:_this.org.id
                }
                console.log(_param,"_param")
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该出单平台?',
                    onOk: () => {
                        new Promise((resolve, reject) => {
                            delete_yun_online(_param).then(res => {
                                if (res.data.err == 0) {
                                    this.$Message.success(res.data.info);
                                    _this.getlist();
                                    _this.getcate();
                                } else {
                                    this.$Message.error(res.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    },
                });
            },
            // 编辑
            edit(itemindex,index){
                var _this = this;
                _this.showAddModal = true;  
                _this.disable = true;
                console.log(_this.org.online_id,"_this.org.online_id")
                _this.org.id=_this.lists[index].accounts[itemindex].id;
                console.log(_this.org.id,"_this.org.id")
                var _param = {
                    id:_this.org.id
                }
                new Promise((resolve, reject) => {
                    get_yun_online(_param).then(res => {
                        if (res.data.err == 0) {
                            this.org = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            add(){
                var _this = this;
                _this.$refs['org'].validate((valid) => {
                    if (valid) { 
                         console.log(_this.org,"提交表单")
                         console.log(_this.org.id,"提交表单idddddddddd")
                        if(_this.org.id){
                            new Promise((resolve, reject) => {
                                update_yun_online(_this.org).then(response => {
                                    if (response.data.err == 0) {
                                        console.log("修改")
                                        _this.showAddModal = false;
                                        _this.$Message.success(response.data.info);
                                        _this.getlist();
                                        _this.getcate();
                                        _this.$refs["org"].resetFields();
                                        _this.eyes=true;
                                        _this.eyes2=false;
                                    } else {
                                        _this.$Message.error(response.data.info);
                                        _this.loading = false;
                                        _this.showAddModal = true;
                                    }
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            });
                        }else{
                            new Promise((resolve, reject) => {
                                create_yun_online(_this.org).then(response => {
                                    if (response.data.err == 0) {
                                        console.log("新增")
                                        _this.showAddModal = false;
                                        _this.$Message.success(response.data.info);
                                        if(this.disable == false){
                                            this.lists.push({});
                                            console.log("push")
                                        }
                                        _this.$refs["org"].resetFields();
                                        _this.getlist();
                                        _this.getcate();
                                        _this.eyes=true;
                                        _this.eyes2=false;
                                    } else {
                                        _this.$Message.error(response.data.info);
                                        _this.loading = false;
                                        _this.showAddModal = true;
                                    }
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            }); 
                        }       
                    } else {
                        // 通过loading来阻止modal隐藏，然后手动修改loading来充值确定按钮
                        setTimeout(() => {
                            _this.loading = false;
                            _this.$nextTick(() => {
                                _this.loading = true;
                                _this.showAddModal = true;   
                            });
                        }, 1000);
                    }    
                })  
            
            },
            cancel () {
                this.$refs['org'].resetFields(); 
            }
        }
    }
</script>